命名规则
# 命名规则
命名统一都是对应的英语翻译 参考文献: 公众号“守候书阁”-《分享个人命名习惯》 (opens new window)
# 一、必要的词汇量
- 头：header
- 内容：content
- 容器：container
- 尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 包裹：wrapper
- 登录：login
- 标志：logo
- 广告：banner/ad
- 页面主体：main
- 热点：hot
- 新闻：news
- 下载：download
- 菜单：menu
- 搜索：search
- 友情链接：friendlink
- 页脚：footer
- 版权：copyright
- 标签页：tab
- 文章列表：list
- 提示信息：message
- 小技巧：tips
- 栏目标题：title
- 加入：joinus
- 指南：guild
- 服务：service
- 注册：regsiter
- 状态：status
- 投票：vote
- 合作伙伴：partner
- 按钮：btn
- 注释：note
- 产品：product
- 评论：comment
- 关于我们：aboutus
- 细节：detail
# 灵活命名
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
# 二、Html命名
- 统一小写
- 关于我们：aboutus.html
# 三、css命名
- 统一"-"分割
# 四、js命名
- 类(class)：大驼峰
- 文件、变量：小驼峰
- 常量：大写字母,"_"分割
- 临时变量、私有变量："_"开头，小驼峰
- 前缀表明功能(动词开头)
- 复值：set
- 获值：get
- 处理操作：handle
- 布尔值变量加前缀
- isPerson
- hasAge
- canDance
# 五、图片命名
- 第一种：类别-模块-功能
| 图片名称 | 意义 |
|---|---|
| btn-submit-comment.jpg | 提交评论的按钮 |
| bg-product-list.jpg | 产品列表模块的背景 |
| icon-views.png | 浏览数的图标 |
| icon-btn-vote.png | 投票按钮 |
| ad-news-aside.jpg | 在新闻侧边栏的广告图片 |
- 第二种：分头尾两部分，下划线隔开。
- 头部：大类性质（广告、标志、菜单、按钮）
- banner：页面顶部广告、装饰图等长方形图片
- logo：标志性图片
- button：在页面上位置不固定且带有链接的小图片
- menu：在页面上某一个位置连续出现，性质相同或的链接栏目的图片
- pic：装饰用的图片
- title：不带链接的图片
- 鼠标感应效果图片：图片名_on/off